<template>
    <div class="container mt-5">
      <form action="" class="mb-4">
        <div class="mb-3">
          <input type="text" v-model="type_item.name" placeholder="类型名" class="form-control">
        </div>
        <div class="mb-3">
          <input type="text" v-model="type_item.code" placeholder="类型码" class="form-control">
        </div>
        <button @click.prevent="add_type" class="btn btn-primary">添加</button>
      </form>
  
      <!-- Toast 组件 -->
      <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">成功</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            添加成功！
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import axios from 'axios'
  import { Toast } from 'bootstrap'
  
  const movies_data = ref([])
  const type_item = reactive({ code: '', name: '' })
  const query_n = ref('')
  const titles_data = ref([])
  
  const get_douban_movies = function () {
    const url = 'http://127.0.0.1:8000/api/douban_n?n=1000'
    axios.get(url).then(res => {
      if (Array.isArray(res.data.data)) {
        movies_data.value = res.data.data
      } else {
        console.error('返回的数据格式不正确，应为数组')
      }
    }).catch(error => {
      console.error('获取豆瓣电影数据失败：', error.message)
    })
  }
  
  const add_type = function () {
    const params = new URLSearchParams()
    params.append('code', type_item.code)
    params.append('name', type_item.name)
  
    const url = 'http://127.0.0.1:8000/api/add_type'
    axios.post(url, params, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(res => {
      console.log('添加类型成功：', res.data)
      const toast = new Toast(document.getElementById('successToast'))
      toast.show()
      type_item.code = ''
      type_item.name = ''
    }).catch(error => {
      console.error('添加类型失败：', error.message)
    })
  }
  
  const query_movies_by_n = function () {
    if (!query_n.value) {
      alert('请输入 n 的值')
      return
    }
  
    const url = `http://127.0.0.1:8000/api/title?n=${query_n.value}`
    axios.get(url).then(res => {
      if (Array.isArray(res.data.data)) {
        titles_data.value = res.data.data
      } else {
        console.error('返回的数据格式不正确，应为数组')
      }
    }).catch(error => {
      console.error('查询电影标题失败：', error.message)
    })
  }
  </script>
  
  <style>
  body {
    background-color: #f5f5f5;
    font-family: 'Inter', sans-serif;
  }
  
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .form-control {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    transition: all 0.3s ease;
  }
  
  .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }
  
  .btn-primary {
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: bold;
    transition: all 0.3s ease;
  }
  
  .btn-primary:hover {
    background-color: #0056b3;
    transform: scale(1.05);
  }
  
  .toast {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s ease-in-out;
  }
  
  @keyframes slideIn {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  </style>